*{margin:0;
    padding: 0;}



body{
    background-color: #fafafa;
 }

html,body{overflow-x: hidden;} /*去除滚动条*/

/*页头导航栏部分*/

.container-fluid{

    background-color:#1d7ad9;

  }

.container{


  }


.head{
    display: flex;
    justify-content: space-between;
    background-color:#1d7ad9;

  }

.phone-left{

    padding:12px 0 11px ;

    color: white;

  }

@media  (max-width: 768px){
    .phone-left{
       visibility: hidden;


    }}




.login-right{
    display: flex;
   padding-right: 15px;




  }

.login1-border{
    border-left: 1px solid white;

  }

.login1 {
    margin: auto 0;
    color: white;
    padding:12px 11px  11px 11px;

  }

.login2-border{
    border-right: 1px solid white;
    border-left: 1px solid white;

  }


.login2{
    color: white;
    padding:12px 11px  11px 11px;

  }



a:hover  {
    text-decoration: none;
    padding: 0  1.2vw;
    background-color: white;

  }

.login2-border:hover .login2{
    color: black;
  }

.login1-border:hover .login1{
    color: black;
  }

 /*导航栏部分*/

.container{
    background-color: #f9f9f9;

  }

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0;
    border: none;
  }

.navbar-nav {
    margin:0;
  }



/*按钮高度*/

#navbar-toggle .icon-bar+.icon-bar {
    margin-top:7.5px;
  }

.navbar-header{
    padding-right: 15px;
    background-color: #f9f9f9;

  }

#responsive-navbar{
    background-color: #f9f9f9;
  }

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: transparent;
    box-shadow: none;
  }

  /*导航栏居中*/
#responsive-navbar {
    text-align: center;
  }

 /*盒子撑起来的空间*/
.navbar-default .navbar-nav>li>a {
    color: black;
    padding: 10px 13px 12px 13px;
  }

@media  (max-width: 768px){
    .navbar-default .navbar-nav>li>a {

        padding: 6px 9.5px 8px 9.5px;
    }}


.btn-a,.btn-b,.btn-c,.btn-d{
    color: black;
    display:block;
    background-color: white;
    margin: 7px 28px;
    border-radius: 7px;
  }



 /*hover点击效果代替bootstrap的hover效果*/

.navbar-default .navbar-nav>li>a:hover {
    color: white;
    background-color: #1d7ad9;
  }

/*整体部分*/
.main {
    background-color: white;
   padding-bottom: 5vh;

  }

.container {
    padding-right: 0;
    padding-left:0;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
  }


.parcel{
    display: flex;
    float: right;

  }

.overall{
    position: relative;
    padding: 48px 0 104px 0;
    background-color: white;

  }

.process{
    width:160px ;
    border-top:5px solid #cccccc ;

  }

.overall-box{

    display: flex;
    justify-content: center;
    background-color:  #cccccc;

  }


.arrange{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color:  #cccccc;
    position: absolute;
    top:17.5%;
  }

.figure{
    position: absolute;
    top:17.5%;
    right: 47.7%;
    z-index: 5;
    color: white;

  }


.figure-bottom{
    text-align: center;
   padding-top:52px ;
  }


.overall:hover .figure-bottom{

    color:  #ff7f02;
  }


.overall:hover .process{
    border-top:5px solid #ff7f02;
  }

.overall:hover .arrange{
    background-color:#ff7f02 ;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    top:16.5%;

  }




@media  (max-width: 768px){
    .overall .process {

        width: 75px;
        border-top: 4px solid #cccccc;


    }}

@media  (max-width: 768px){
    .overall .arrange{

        width: 17px;
        height: 17px;
        border-radius: 50%;
        background-color:  #cccccc;
        position: absolute;
        top:24%;

    }}

@media  (max-width: 768px){
    .overall .figure{

        position: absolute;
        top:23.4%;
        right: 45.8%;
        z-index: 5;
        color: white;
        font-size: 13.5px;

    }}

@media  (max-width: 768px){
    .overall:hover .arrange{
        background-color:#ff7f02 ;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        position: absolute;
        top:22.7%;

    }}

@media  (max-width: 768px){
    .figure-bottom {
        text-align: center;
        padding: 52px  7px 0  3px;
        font-size: 12px;
    }}

@media (max-width: 768px){
    .overall {
         padding-bottom:48px;
         margin-bottom: 1px;
    }}













.text-custom{
    display: flex;
    margin-bottom:7.8px;
  }


.rectangle{
    display: block;
    width: 4px;
    height: 21px;
    background-color: #1d7ad9;
    border-radius: 2px;
  }


.text-custom2{

    font-size: 18px;
   padding-left: 10px;
  }

p{
    margin: 0;
}

@media (max-width: 768px){
    .text-custom2 {
        font-size: 15px;
        padding-left: 10px;
    }}






.choose-box{
    background-image: url("images/choose a box.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 23px;
    height: 19px;

  }

.text-custom3{
    padding-left: 11px;

  }

.md-5{
    padding: 1.5rem;
    position: relative;
    border-right: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;

  }


.row1 {

   line-height: 50px;

  }



input+label::before{
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 9px;
    content: "";
    width: 16px;
    height: 16px;
    line-height: 16px;
    border: 1px solid #999999;
    border-radius: 50%;
    background:  #e8e8e8;


  }






 /*阴影部分插入*/

input:checked+label::before {

    width: 16px;
    height: 16px;
    box-shadow:  0 0 0 5px #1d7ad9 inset;
    background-color:white;
    border: none;

  }




    /*边款方式*/

/*input:checked+label::before {*/

/*    width: 16px;*/
/*    height: 16px;*/
/*    border: 5px solid #1d7ad9;*/
/*    background-color: white;*/

/*}*/


/*图片插入方式*/
/*input:checked+label::before {
    background-color: #1d7ad9;
    background-image: url("images/center-box.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    border: none;
}*/

#appoint-three,#appoint-two,#appoint-one,
#appoint-four,#appoint-five,#appoint-last1,#appoint-last2,
#appoint-last3,#appoint-last4,#appoint-last5{
    display: none;
  }




label{

	font-size: 15px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 11px;
	color: #666666;
    margin-bottom: 1rem;

  }





.down-p select{
    min-width: 127px;
    line-height: 30px;
    outline: none;
    border: 1px solid #e8e8e8;
    -webkit-appearance: none;
    padding-left: 1px;
    font-size: 15px;
    background-image: url("images/drwn-p.png");
    background-repeat: no-repeat;
    background-position: right;
    
  }


/*.box{*/
/*  padding-left:30px;*/
/*  }*/





.choose-box2{
    background-image: url("images/whirly.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 26px;
    height: 24px;

}

.text-custom4{
    padding-left: 11px;

}



.md-7{
    padding: 1.5rem;
    position: relative;
    border-right: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;

}

.wide-w{
    width:40%;

}

.row2{
    line-height: 50px;


}



/*媒体查询实现自适应，定位垂直居中*/


.text-custom-two{
    display: flex;
    align-items: center;
    padding: 16px 0 16px 17px;    /*pc端*/
    background-color: #f3f3f3;

}


.box2{

    margin-right: 8px;
   position: absolute;
    top: 33%;
    right: 0;

}


@media screen and (max-width: 768px) and (max-width: 768px){
    .box2{
        position: absolute;
        top:98%;
        left: 24px;
    }}


.box3{

    margin-right: 8px;
    position: absolute;
    top: 21%;
    right: 0;

}

@media screen and (max-width: 768px) and (max-width: 768px){
    .box3{
        position: absolute;
        top:98%;
        left: 24px;
    }}




.text-custom-special2{
    display: flex;
    align-items: center;
    padding: 16px 0 16px 17px;    /*pc端*/
    background-color: #f3f3f3;

}


@media (max-width: 768px){
    .text-custom-special2{
        display: flex;
        align-items: center;
        padding: 16px 0 16px 17px;     /*不用定位可以注释*/
        background-color: #f3f3f3;
        margin-top: 55px;
    }}



.text-custom-special{
    display: flex;
    align-items: center;
    padding: 16px 0 16px 17px;    /*pc端*/
    background-color: #f3f3f3;
}

.choose-box3 {
    background-image: url(images/shear.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 19px;
    height: 24px;
}




@media (max-width: 768px){
.text-custom-special{
    display: flex;
    align-items: center;
    padding: 16px 0 16px 17px;     /*不用定位可以注释*/
    background-color: #f3f3f3;
    margin-top: 55px;
}}



.md-8{
    padding: 1.5rem;
    position: relative;
    border-right: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
}


.dot{

    line-height: 50px;

}



.main-bottom{
    height: 287px;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #e7e7e7;
}

@media (max-width: 768px){
    .main-bottom{
                             /*不用定位可以注释*/
        height: 287px;
        border-top:1px solid #e7e7e7;
        margin-top: 55px;
    }}


.bottom{
    width: 179px;
    height: 46px;
    line-height: 46px;
    font-size: 18px;
    text-align: center;
    outline: none;
    border: 1px solid #999999;
    color: white;
    border-radius: 7px;
    background-color: #666666;

}

.bottom:hover{
    background-color:  #e15053;
}

button.bottom:visited{
    background:  #e15053;
}

@media (max-width: 768px){
.main-bottom {
    height: 213px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e7e7e7;
}}




@media (max-width: 768px){
.bottom{
    width: 115px;
    height: 43px;
    line-height: 43px;
    font-size: 15px;
    text-align: center;
    outline: none;
    border: 1px solid #999999;
    color: white;
    border-radius: 7px;
    background-color: #666666;

}}

footer{
    bottom: 0;
}
.box-6 {
    padding: 3vh 0;
    background-color: #f9f9f9;
}


.level-two{display:flex;}

.box-7{
    padding-bottom: 6vh;
}

.box-8{
    padding-bottom: 1.35rem;
}

.code{
    background-image: url("images/code.png");
    background-repeat: no-repeat;
    background-size:100% ;
    width: 92px;
    height: 92px;
}

.level-one{
    display: flex;

}

.box-footer{

   text-align: center;
    background-color: #1d7ad9;
    border-top: 1px solid white;
    font-size: 14px;
    color: #ffffff;
    padding: 0 10vw;}

.box-10{
    padding-right: 10px;
}


.link-2{
    color: #999999;
}

.link-2:hover {
    background: none;
    padding: 0;
    color: #1d7ad9;
}

